

<template>
  <div>
    <div style="float: right">
      <el-button type="primary" size="large" @click="addOutSide">添加</el-button>
    </div>
    <el-table :data="outsideList" style="width: 100%">
      <el-table-column prop="sysUserName" label="用户名"/>
      <el-table-column prop="job" label="岗位"/>
      <el-table-column prop="planeFlag" label="是否有工作计划"/>
      <el-table-column prop="agreeFlag" label="是否通过审批"/>
<!--      <el-table-column label="操作" width="300">-->
<!--        <template #default="scope" >-->
<!--          <el-button size="small" type="success" @click="lookmange(scope.row)">查看</el-button>-->
<!--          &lt;!&ndash;        <el-button size="small" type="primary" @click="pending(scope.row)">挂起</el-button>&ndash;&gt;-->
<!--          <el-button size="small" type="danger"  @click="deleteMange(scope.row)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </div>
  <div id="addOutSideDialog">
    <el-dialog v-model="addoutSide" fullscreen>
        <el-form :model="addobject" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="addobject.sysUserName" readonly />
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="addobject.sysDeptName" readonly />
          </el-form-item>
          <el-form-item label="岗位">
            <el-input v-model="addobject.job" />
          </el-form-item>
          <el-form-item label="是否有工作计划：" label-width="150">
            <el-radio-group v-model="addobject.planeFlag" class="ml-4">
              <el-radio label="0" size="large">否</el-radio>
              <el-radio label="1" size="large">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否通过审批：" label-width="150">
            <el-radio-group v-model="addobject.agreeFlag" class="ml-4">
              <el-radio label="0" size="large">否</el-radio>
              <el-radio label="1" size="large">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出发和返回时间：" label-width="150">
            <div class="block">
              <el-date-picker
                  v-model="exporttimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="预计出发时间"
                  end-placeholder="预计返回时间"
              />
            </div>
          </el-form-item>
          <el-form-item label="出差性质">
            <el-select v-model="addobject.evectionType" placeholder="请选择出差性质">
              <el-option label="陌拜" value="陌拜" />
              <el-option label="回访" value="回访" />
              <el-option label="立项" value="立项" />
              <el-option label="签单" value="签单" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="出发地">
            <el-input v-model="addobject.departurePlace"  />
          </el-form-item>
          <el-form-item label="目的地">
            <el-input v-model="addobject.destinationPlace"  />
          </el-form-item>
          <el-form-item label="出差计划">
            <el-input type="textarea" v-model="addobject.evectionProject"></el-input>
          </el-form-item>
          <el-form-item label="出差目的">
            <el-input type="textarea" v-model="addobject.evectionTarget"></el-input>
          </el-form-item>
          <el-form-item label="交通工具">
            <el-select v-model="addobject.transportation" placeholder="请选择交通工具">
              <el-option label="飞机" value="飞机" />
              <el-option label="高铁" value="高铁" />
              <el-option label="火车" value="火车" />
              <el-option label="客车" value="客车" />
              <el-option label="自驾" value="自驾" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="addobject.sysUserName" readonly />
          </el-form-item>
          <el-form-item label="审批主管">
            <el-select v-model="addobject.deptLeader" placeholder="请选择审批主管">
              <el-option v-for="item in checkUserList" :label="item.userName" :value="item.loginName" />
            </el-select>
          </el-form-item>
        </el-form>
      <div style="padding: 1rem">
        <el-button size="small" @click="addoutSide=false">取消</el-button>
        <el-button size="small" type="primary" @click="conAddoutSide()">确认</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";

import {ElMessage} from "element-plus";
import { format } from 'date-fns';
import {addOutSideVue, getAddInfo, getoutsidebyID} from "../../api/function";
let outsideList = ref([])
let addoutSide = ref(false);
let checkUserList = ref([]);
let dept = ref({})
let exporttimes = ref('');
let user = ref({})
let addobject = ref({
  sysUserName:'',
  sysDeptName:'',
  sysUserid:'',
  sysDeptid:'',
  planeFlag:'',
  agreeFlag:'',
  departureTime:'',
  returnTime:'',
  evectionType:'',
  departurePlace:'',
  destinationPlace:'',
  evectionProject:'',
  evectionTarget:'',
  transportation:'',
  togetherMan:'',
  fromMan:'',
  deptLeader:'',
  job:'',
})

onMounted(async ()=>{
  await query()
})

const query = async () => {
  let res= await getoutsidebyID(null);
  outsideList.value = res.data.rows;

}
const addOutSide=async ()=>{
  addoutSide.value = true
  let res = await getAddInfo(null);
  dept.value = res.data.dept;
  user.value = res.data.user;
  addobject.value={};
  checkUserList.value = res.data.userlist
  addobject.value.sysUserName = user.value.userName;
  addobject.value.sysUserid = user.value.userId;
  addobject.value.sysDeptName = dept.value.deptName;
  addobject.value.sysDeptid = user.value.deptId
  addobject.value.fromMan = user.value.userName
}
const conAddoutSide = async() => {
  let beginandend = exporttimes.value;
  if (!beginandend || beginandend.length !== 2) {
    ElMessage.error("请选择开始时间和结束时间");
    return;
  }
  let [beginTime, endTime] = beginandend.map((time) =>
      format(time, "yyyy-MM-dd HH:mm:ss")
  );
  addobject.value.departureTime = beginTime;
  addobject.value.returnTime =endTime;
   let les = await  addOutSideVue({
     sysUserName:addobject.value.sysUserName,
     sysDeptName:addobject.value.sysDeptName,
     sysUserid:addobject.value.sysUserid,
     sysDeptid:addobject.value.sysDeptid,
     planeFlag:addobject.value.planeFlag,
     agreeFlag:addobject.value.agreeFlag,
     departureTime:addobject.value.departureTime,
     returnTime:addobject.value.returnTime,
     evectionType:addobject.value.evectionType,
     departurePlace:addobject.value.departurePlace,
     destinationPlace:addobject.value.destinationPlace,
     evectionProject:addobject.value.evectionProject,
     evectionTarget:addobject.value.evectionTarget,
     transportation:addobject.value.transportation,
     togetherMan:addobject.value.togetherMan,
     fromMan:addobject.value.fromMan,
     deptLeader:addobject.value.deptLeader,
     job:addobject.value.job,
   });
  if (res.code == 200){
    ElMessage.success(res.msg);
    addoutSide.value = false;
    await query()
  }else{
    ElMessage.error(res.msg)

  }
}

</script>
<style scoped>

</style>
